<!-- 使用例子：
<pb-action-sheet ref="actionSheet" title="请选择项目" :list="list" @onActionItemClick="onActionClick"></pb-action-sheet>

list:[{name:"a",value:"0"},{name:"a",value:"1"}]

onActionClick(item){
	
}

//弹出组件
this.$refs.actionSheet.show = true -->

<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :description="description" :show="show" cancelText="取消"
			@close="show=false" round="24rpx" :safeAreaInsetBottom="true" @select="selectClick">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		name: "pb-action-sheet",
		data() {
			return {
				show: false
			};
		},
		options: {
			styleIsolation: 'shared' // 解除样式隔离(解决在子组件中使用deep修改第三方样式失效的问题)
		},
		props: {
			title: {
				type: String,
				require: false
			},
			description: {
				type: String,
				require: false
			},
			list: {
				type: Array,
				default: () => [],
				require: true
			}
		},
		methods: {
			selectClick(data) {
				console.log('【pb-action-sheet】selectClick=>' + JSON.stringify(data))
				this.$emit('onActionItemClick', data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef VUE3 */
	/deep/.u-action-sheet__item-wrap {
		display: block !important;
		max-height: 65vh !important;
		overflow-y: scroll !important;
	}
	/deep/.u-action-sheet__header__icon-wrap {
		display: none !important;
	}
	/deep/ .u-action-sheet__header {
		padding: 20rpx 28rpx;
	}
	/deep/ .u-action-sheet__header__title {
		font-size: 30rpx !important;
	}
	/deep/ .u-action-sheet__item-wrap__item {
		padding: 24rpx!important;
	}
	/deep/ .u-action-sheet__item-wrap__item__name {
		font-size: 32rpx !important;
	}
	/deep/ .u-action-sheet__cancel-text {
		font-size: 30rpx !important;
		padding: 24rpx !important;
	}
	/deep/ .u-gap {
		height: 12rpx !important;
	}
	/* #endif */
	
	/* #ifdef VUE3 */
	:deep(.u-action-sheet__item-wrap) {
		display: block !important;
		max-height: 65vh !important;
		overflow-y: scroll !important;
	}
	:deep(.u-action-sheet__header__icon-wrap) {
		display: none !important;
	}
	:deep(.u-action-sheet__header){
		padding: 20rpx 28rpx;
	}
	:deep(.u-action-sheet__header__title) {
		font-size: 30rpx !important;
	}
	:deep(.u-action-sheet__item-wrap__item) {
		padding: 24rpx!important;
	}
	:deep(.u-action-sheet__item-wrap__item__name) {
		font-size: 32rpx !important;
	}
	:deep(.u-action-sheet__cancel-text) {
		font-size: 30rpx !important;
		padding: 24rpx !important;
	}
	:deep(.u-gap) {
		height: 12rpx !important;
	}
	/* #endif */
</style>
